<!--
 * @Date: 2019-11-11 10:48:37
 * @LastEditors  : Vi卡农
 * @LastEditTime : 2020-01-16 18:42:53
 * @describe: -楼盘字典列表维护-
 -->
<template>
  <el-card shadow="never" class="aui-card--fill"  ref="fromc">
    <div class="mod-dictionary__dictinfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  ref="froma">
        <el-row>
          <el-col :span="18">
            <el-form-item>
              物业类型：
              <ren-select v-model="dataForm.type" dict-type="dictType" placeholder="物业类型" clearable></ren-select>
            </el-form-item>

            <el-form-item>
              区域：
              <el-select
                v-model="dataForm.districtCode"
                placeholder="请选择"
                @change="CityRegionChange"
                clearable
              >
                <el-option
                  v-for="item in this.$store.state.CityRegion"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              商圈：
              <el-select
                v-model="dataForm.business"
                placeholder="请选择"
                :disabled="dataForm.districtCode==''"
                clearable
              >
                <el-option
                  v-for="item in businessList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              地铁线路：
              <el-select v-model="dataForm.metroId" placeholder="请选择" clearable>
                <el-option
                  v-for="item in this.$store.state.MetroPage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="MetroPageChange(item)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              站点：
              <el-select
                v-model="dataForm.stationId"
                placeholder="请选择"
                :disabled="dataForm.metroId==''"
                clearable
              >
                <el-option
                  v-for="item in metrostationList"
                  :key="item.stationId"
                  :label="item.stationName"
                  :value="item.stationId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left:10px">
              查看来源：
              <el-select v-model="dataForm.self" style="width:100px">
                <el-option label="查看所有" value="1"></el-option>
                <el-option label="维护楼盘" value="0"></el-option>
                <el-option label="维护字典" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入楼盘名、楼盘编号检索"
              v-model="dataForm.search"
              class="input-with-select"
              clearable
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              面积：
              <el-input v-model="dataForm.areas" placeholder="最小" class="Section_inp" clearable></el-input>
              {{' -'}}
              <el-input v-model="dataForm.areae" placeholder="最大" class="Section_inp" clearable></el-input>
            </el-form-item>
            <el-form-item>
              出租价格：
              <el-input
                v-model="dataForm.leasePrices"
                placeholder="最低价"
                class="Section_inp"
                clearable
              ></el-input>
              {{' -'}}
              <el-input
                v-model="dataForm.leasePricee"
                placeholder="最高价"
                class="Section_inp"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item>
              出售价格：
              <el-input
                v-model="dataForm.sellPrices"
                placeholder="最低价"
                class="Section_inp"
                clearable
              ></el-input>
              {{' -'}}
              <el-input
                v-model="dataForm.sellPricee"
                placeholder="最高价"
                class="Section_inp"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              审核类型：
              <ren-select
                v-model="dataForm.examine"
                dict-type="examine"
                placeholder="审核类型"
                clearable
              ></ren-select>
            </el-form-item>

            <el-button @click="Reset">重置</el-button>
            <el-form-item style="margin-left:20px;">
              <el-button
                v-if="$hasPermission('dictionary:dictinfo:save')&&dataForm.self=='1'"
                type="primary"
                @click="addOrUpdateHandle()"
              >新增</el-button>
              <el-button
                v-if="$hasPermission('dictionary:dictinfo:delete')&&dataForm.self=='0'"
                type="danger"
                @click="deleteHandle()"
              >{{ $t('deleteBatch') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        style="width: 100%;"
        @row-dblclick="details"
        @selection-change="dataListSelectionChangeHandle"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="编号" header-align="center" align="center">
          <template slot-scope="scope">{{"LP - "+scope.row.id.substring(scope.row.id.length-6)}}</template>
        </el-table-column>
        <el-table-column prop="name" label="楼盘名称" header-align="center" align="center" width="220">
          <template slot-scope="scope">
            <span class="font_weight">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="imgUrl"
          label="楼盘外图"
          header-align="center"
          align="center"
          width="140"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.imgUrl" class="table_img">
              <img :src="scope.row.imgUrl" alt srcset />
            </div>
            <div v-else class="imgNull">图片拍摄中</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="楼盘类型" header-align="center" align="center">
          <template slot-scope="scope">
            <span
              :style="dictTypeColor(scope.row.type)"
            >{{ $getDictLabel("dictType", scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="districtCode"
          label="商圈区域"
          header-align="center"
          align="center"
          width="130"
        >
          <template
            slot-scope="scope"
          >{{ $Dictionaries("CityRegion", scope.row.districtCode) }} {{ $Dictionaries("BusinessPage", scope.row.business) }}</template>
        </el-table-column>
        <el-table-column prop="areas" label="面积区间（㎡）" header-align="center" align="center">
          <template slot-scope="scope">{{scope.row.areas}} - {{scope.row.areae}}</template>
        </el-table-column>

        <el-table-column
          prop="sellPrices"
          label="价格"
          header-align="center"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            出售：{{scope.row.sellPrices}} - {{scope.row.sellPricee}}
            <br />
            出租：{{scope.row.leasePrices}} - {{scope.row.leasePricee}}
          </template>
        </el-table-column>
        <el-table-column
          prop="propertyPrice"
          label="物业费（元/㎡/月）"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="maintainName"
          label="维护人"
          header-align="center"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="deptName"
          label="部门"
          header-align="center"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="examine"
          label="审核"
          header-align="center"
          align="center"
          v-if="dataForm.self=='0'"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.examine"
              @change="tabExamineChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-if="$hasPermission('dictionary:dictinfo:updateExamine')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column
          prop="extranet"
          label="外网同步"
          header-align="center"
          align="center"
          v-if="dataForm.self=='0'"
        >
          <template slot-scope="scope">
            <el-switch
              class="switchStyle"
              v-model="scope.row.extranet"
              :active-value="1"
              :inactive-value="0"
              @change="tabExtranetChange(scope.row)"
              v-if="$hasPermission('dictionary:dictinfo:updateExtranet')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          v-if="dataForm.self=='1'"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="RoomDictionary(scope.row)">字典</el-button>
            <!-- <el-button
              type="text"
              size="small"
              @click="details(scope.row.id)"
              v-if="dataForm.self=='0'"
            >详情</el-button>-->
            <!-- <el-button
              v-if="$hasPermission('dictionary:dictinfo:delete')&&dataForm.self=='0'"
              type="text"
              size="small"
              @click="deleteHandle(scope.row.id)"
            >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="ZWbox"></div>
      <div class="paginationBox">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        ></el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./dictinfo-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/dictionary/dictinfo/page",
        getDataListIsPage: true,
        exportURL: "/dictionary/dictinfo/export",
        deleteURL: "/dictionary/dictinfo",
        deleteIsBatch: true
      },
      dataForm: {
        search: "",
        type: "",
        examine: "",
        districtCode: "",
        business: "",
        sellPrices: "",
        sellPricee: "",
        leasePrices: "",
        leasePricee: "",
        propertyPrices: "",
        propertyPricee: "",
        self: "1",
        metroId: "",
        stationId: ""
      },
      // CityRegion: this.$store.state.CityRegion,
      // BusinessPage: this.$store.state.BusinessPage,
      businessList: this.$store.state.BusinessPage,
      metrostationList: [], //地铁站点列表
      select_type: "1"
    };
  },
  components: {
    AddOrUpdate
  },
  created() {},
  mounted() {
    var a = document.getElementsByClassName("el-tabs__content")[0].clientWidth;
    // var b=document.getElementsByClassName('paginationBox');
    //b.style.width=a
  },
  methods: {
    Reset() {
      this.dataForm = {
        search: "",
        type: "",
        examine: "",
        districtCode: "",
        business: "",
        sellPrices: "",
        sellPricee: "",
        leasePrices: "",
        leasePricee: "",
        propertyPrices: "",
        propertyPricee: "",
        self: "2",
        metroId: "",
        stationId: ""
      };
    },
    RoomDictionary(row) {
      sessionStorage.setItem("MaintainType", "true");
      this.$router.push({
        name: "BuildingDictionaries",
        query: { ID: row.id, name: row.name }
      });
    },
    details(row) {
      let _this = this;

      if (this.dataForm.self == "1" || this.dataForm.self == "0") {
        this.$router.push({
          name: "BuildingDetails",
          query: { ID: row.id }
        });
      } else if (this.dataForm.self == "2") {
        sessionStorage.setItem("MaintainType", "true");
        this.$router.push({
          name: "BuildingDictionaries",
          query: { ID: row.id, name: row.name }
        });
      }
    },

    //审核
    tabExamineChange(row) {
      this.$http
        .put(
          `/dictionary/dictinfo/updateExamine`,
          {},
          {
            params: {
              id: row.id,
              examine: row.examine
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("更改成功");
        })
        .catch(() => {});
    },

    //外网同步
    tabExtranetChange(row) {
      this.$http
        .put(
          `/dictionary/dictinfo/updateExtranet`,
          {},
          {
            params: {
              id: row.id,
              examine: row.extranet
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("更改成功");
        })
        .catch(() => {});
    },
    //行政区选择change
    CityRegionChange(val) {
      this.businessList = [];
      this.dataForm.business = "";
      this.$http
        .get(`/dictionary/business/businessList`, {
          params: {
            districtCode: val
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.businessList = res.data;
        })
        .catch(() => {});
    },
    //地铁线路选择change
    MetroPageChange(item) {
      if (item.metroStation.length > 0) {
        this.metrostationList = item.metroStation;
      } else {
        this.metrostationList = [];
        this.dataForm.stationId = "";
      }
    }
  },
  watch: {
    dataForm: {
      handler(nowVal, oldVal) {
        let _this = this;
        _this.getDataList();
      },
      deep: true
    }
  }
};
</script>
<style scoped lang="scss">
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}
.el-form--inline .el-form-item {
  margin-right: 7px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 7px;
}
</style>